<template>
	<div class="addServer">
    <el-button
    type="primary"
    icon="el-icon-plus"
    size="small"
    @click="dialogFormVisible=true"
    style="background-color: #e8f4ff; border-color: #1890ff; color: #1890ff">新增
    </el-button>
    <el-button
        icon="el-icon-download"
        type="warning"
        size="mini"
        disabled
        plain>发起审核
    </el-button>

    <div class="center">
      <!-- visible	是否显示 Dialog，支持 .sync 修饰符 -->
      <el-dialog title="添加养修服务单项" :visible.sync="dialogFormVisible">
        <!--  :rules="rules" -->
        <el-form>
          <el-form-item label="服务名称：" prop="name">
            <el-input size="small" v-model="service.name"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="服务原价：" prop="originalPrice">
            <el-input size="small" v-model="service.originalPrice"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="服务折扣价：" prop="discountPrice">
            <el-input size="small" v-model="service.discountPrice"  :style="{width:'500px'}"></el-input>
          </el-form-item>

          <el-form-item label="是否套餐：" prop="carPackage">
            <el-radio v-model="radio" label="1">否</el-radio>
            <el-radio v-model="radio" label="2">是</el-radio>
          </el-form-item>

          <el-form-item label="服务分类：" prop="serviceCatalog">
            <el-select size="small" v-model="service.serviceCatalog" placeholder="请选择"  :style="{width:'500px'}">
              <el-option label="维修"></el-option>
              <el-option label="保养"></el-option>
              <el-option label="其他"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注信息：" prop="info">
            <el-input :style="{width:'500px'}" size="small" v-model="service.info"></el-input>
          </el-form-item>
        </el-form>
        <!-- 确定取消栏 -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addList()">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
	</div>
</template>

<script>
import {addServiceItemApi} from "@/request/api"
export default{
  data(){
    return {
      dialogFormVisible: false,
      radio:'2',
      value1:"",
      service:{
        name:'',
        originalPrice:'',
        discountPrice:'',
        serviceCatalog:'',
        info:'',
      },
      // 校验规则
      // rules:{
      //   name:[
      //     {required:true, // 必填项
      //       message:"服务名不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   originalPrice:[
      //     {required:true, // 必填项
      //       message:"服务原价不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   discountPrice:[
      //     {required:true, // 必填项
      //       message:"服务折扣不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   serviceCatalog:[
      //     {required:true, // 必填项
      //       message:"服务分类不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   info:[
      //     {required:true, // 必填项
      //       message:"备注信息不能为空！", // 提示语
      //       trigger:"blur"}
      //   ],
      //   // serviceType:[
      //   //   {required:true, // 必填项
      //   //     message:"选项不能为空！", // 提示语
      //   //     trigger:"blur"}
      //   // ],
      // }
    }
  },
  methods:{
    // 添加数据到表单
    async addList(){
      if(this.service){
        let res = await addServiceItemApi({...this.service})
        this.dialogFormVisible = false
      }
      if(!res) return
    }
  }
}
</script>

<style scoped lang="less">
.addServer{
  display: flex;
  justify-content: space-between;
}
</style>